import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { ProColumns, ProDescriptionsItemProps, ProForm, ProFormDateRangePicker } from '@ant-design/pro-components';
import { ProCard, ProDescriptions, ProTable, TableDropdown, StatisticCard } from '@ant-design/pro-components';
import {
  Button,
  Input,
  message,
  Space,
  Drawer,
  Calendar,
  Col,
  Row,
  Card,
  Select,
  Tabs,
  Radio,
  DatePicker
} from 'antd';
import { useState, useRef, useEffect } from 'react';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Moment } from 'moment';
import { useHistory } from 'react-router-dom'
import {
  reqSysWorkload, reqSysDrugConsumStat, reqSysPassengersByPayType
} from '@/services/tymessage';

import UserHead from '@/components/UserHead'

import styles from './index.module.less'
import classNames from 'classnames';
import { Column } from '@ant-design/charts';
import { Bar, Line } from '@ant-design/plots';

import TyWesternMedicineTable from '@/components/TyWesternMedicine';
import moment from 'moment';

const { RangePicker } = DatePicker;

const { Search } = Input;
const { Meta } = Card;

const { Divider } = StatisticCard;

const getListData = (value: Moment) => {
  let listData;
  switch (value.date()) {
    case 8:
      listData = [
        { type: 'success', content: '可预约' },
      ];
      break;
    case 10:
      listData = [
        { type: 'warning', content: '预约繁忙' },
      ];
      break;
    case 15:
      listData = [
        { type: 'error', content: '无号可预约' },
      ];
      break;
    default:
  }
  return listData || [];
};

const getMonthData = (value: Moment) => {
  if (value.month() === 8) {
    return 1394;
  }
};

export default () => {

  const histroy = useHistory()
  const [type, setType] = useState('table');
  const [open, setOpen] = useState(false);

  const [data, setData] = useState([]);
  const [data2, setData2] = useState([]);

  const [createDate, setCreateDate] = useState(null);

  const [workload, setWorkload] = useState(null);

  useEffect(() => {
    let currentDate = moment().format('YYYY-MM-DD');
    getWorkload({
      "startDate": currentDate,
      "endDate": currentDate
    });
    getSysDrugConsumStat({
      "startDate": currentDate,
      "endDate": currentDate
    });
    getPassengersByPayType({
      "startDate": currentDate,
      "endDate": currentDate
    });
  }, []);

  const config = {
    data,
    yField: 'medicineName',
    xField: 'quantity',
    yAxis: {
      label: {
        autoRotate: false,
      },
    },
    scrollbar: {
      type: 'vertical',
    },
  };

  const config2 = {
    data2,
    xField: 'timeSolt',
    yField: 'total',
    seriesField: 'category',
    xAxis: {
      label: {
        formatter: (v) => { return `${v}:00` },
      },
    },
    // yAxis: {
    // label: {
    //   // 数值格式化为千分位
    //   formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
    // },
    // },
  };

  const handleDateChange = (date: moment, dateString: string) => {
    getWorkload({
      "startDate": dateString[0],
      "endDate": dateString[1]
    });
    getSysDrugConsumStat({
      "startDate": dateString[0],
      "endDate": dateString[1]
    });
    getPassengersByPayType({
      "appointDate": dateString[0],
    });
  }

  const getWorkload = async (params: any) => {
    const res = await reqSysWorkload(params);
    if (res?.resultCode === '00000000') {
      setWorkload(res?.data);
    }
  }

  const getSysDrugConsumStat = async (params: any) => {
    const res = await reqSysDrugConsumStat(params);
    if (res?.resultCode === '00000000') {
      setData(res?.data?.result);
    }
  }

  const getPassengersByPayType = async (params: any) => {
    const res = await reqSysPassengersByPayType(params);
    if (res?.resultCode === '00000000') {
      setData2(res?.data);
    }
  }
// {loading ? <LoadingOutlined /> : <PlusOutlined />}
  return (
    <>
      <ProCard>
        <RangePicker name='createDate' onChange={handleDateChange} />
      </ProCard>
      <ProCard style={{marginTop:10}}>
        <StatisticCard.Group direction={'row'}>
          <StatisticCard
            statistic={{
              title: '总流量(人次)',
              value: `${workload?.total ? workload?.total : 0}人`,
            }}
          />
          <Divider type={'vertical'} />
          <StatisticCard
            statistic={{
              title: '医生接待数',
              value: `${workload?.doctorWorkload ? workload?.doctorWorkload : 0}人`,
            }}

          />
          <Divider type={'vertical'} />
          <StatisticCard
            statistic={{
              title: '护士接待数',
              value: `${workload?.nurseWorkload ? workload?.nurseWorkload : 0}人`,
            }}

          />
        </StatisticCard.Group>
      </ProCard>
      <ProCard style={{marginTop:10}}>
        <Row gutter={[8, 48]}>
          {/* <Col span={12}>
            <Bar {...config} />
          </Col> */}
          <Col span={24}>
            <Line data={data2} {...config2} />
          </Col>
        </Row>
      </ProCard >
    </>
  );
};
